<template>
	<div class="common-layout">
		<el-container>
			<el-header style="height:auto;">
				<BlogsHead></BlogsHead>
			</el-header>
		</el-container>
	</div>

	<div class="body1">
		<div class="shell">
			<div class="container a-container" id="a-container">
				<form action="" method="" class="form" id="a-form">
					<h2 class="form_title title">创建账号</h2>
					<span class="form_span">输入账号密码进行账号注册</span>
					<input type="text" class="form_input" v-model="email" placeholder="Email">
					<el-button @click="SendCode">发送验证码</el-button>
					<input type="text" class="form_input" v-model="code" placeholder="Code">
					<input type="text" class="form_input" v-model="RegisterName" placeholder="Name">
					<input type="text" class="form_input" v-model="RegisterPassword" placeholder="Password">
					<input type="text" class="form_input" v-model="RegisterPasswordRepeat" placeholder="Password">
					<button class="form_button button submit" @click="Register">SIGN UP</button>
				</form>
			</div>

			<div class="container b-container" id="b-container">
				<form action="" method="" class="form" id="b-form">
					<h2 class="form_title title">登录账号</h2>
					<span class="form_span">输入账号密码进行账号登录</span>
					<input type="text" class="form_input" v-model="LoginName" placeholder="Name">
					<input type="text" class="form_input" v-model="LoginPassword" placeholder="Password">
					<a class="form_link" @click="CollectionVisiable = !CollectionVisiable">忘记密码？</a>
					<el-dialog title="忘记密码" v-model="CollectionVisiable" width="500px">
						<el-input v-model="email" placeholder="输入邮箱" />
						<el-button @click="SendCode" style="margin-top: 3%">发送验证码</el-button>
						<el-input v-model="code" placeholder="输入验证码" style="margin-top: 3%" />
						<el-input v-model="newPassword" placeholder="输入密码" style="margin-top: 3%" />
						<el-input v-model="repeatNewPassword" placeholder="再次输入密码" style="margin-top: 3%" />
						<el-button @click="ResetPassword" style="margin-top: 3%">确认新密码</el-button>
					</el-dialog>
					<button class="form_button button submit" @click="Login">SIGN IN</button>
				</form>
			</div>

			<div class="switch" id="switch-cnt">
				<div class="switch_circle"></div>
				<div class="switch_circle switch_circle-t"></div>
				<div class="switch_container" id="switch-c1">
					<h2 class="switch_title title" style="letter-spacing: 0;">Welcome Back！</h2>
					<p class="switch_description description">已经有账号了嘛，去登入账号来进入奇妙世界吧！！！</p>
					<button class="switch_button button switch-btn">SIGN IN</button>
				</div>

				<div class="switch_container is-hidden" id="switch-c2">
					<h2 class="switch_title title" style="letter-spacing: 0;">Hello Friend！</h2>
					<p class="switch_description description">去注册一个账号，成为尊贵的粉丝会员，让我们踏入奇妙的旅途！</p>
					<button class="switch_button button switch-btn">SIGN UP</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { onBeforeMount, onMounted, onUpdated, ref } from 'vue';
import axios from 'axios'
import BlogsHead from '@/components/Blogs/BlogsHead.vue'
import { IsLoginIn } from '@/components/functions/IsLoginIn.vue';
import { useRouter } from 'vue-router'; // 引入路由
import { EventSourcePolyfill } from 'event-source-polyfill';
import { ElNotification } from 'element-plus'

const router = useRouter();

const CollectionVisiable = ref(false);

const newPassword = ref('');

const repeatNewPassword = ref('');

function LoginStart() {
	let switchCtn = document.querySelector("#switch-cnt");
	let switchC1 = document.querySelector("#switch-c1");
	let switchC2 = document.querySelector("#switch-c2");
	let switchCircle = document.querySelectorAll(".switch_circle");
	let switchBtn = document.querySelectorAll(".switch-btn");
	let aContainer = document.querySelector("#a-container");
	let bContainer = document.querySelector("#b-container");
	let allButtons = document.querySelectorAll(".submit");

	let getButtons = (e) => {
		e.preventDefault();
	}

	let changeForm = (e) => {
		// 修改类名
		switchCtn.classList.add("is-gx");
		setTimeout(function () {
			switchCtn.classList.remove("is-gx");
		}, 1500)
		switchCtn.classList.toggle("is-txr");
		switchCircle[0].classList.toggle("is-txr");
		switchCircle[1].classList.toggle("is-txr");

		switchC1.classList.toggle("is-hidden");
		switchC2.classList.toggle("is-hidden");
		aContainer.classList.toggle("is-txl");
		bContainer.classList.toggle("is-txl");
		bContainer.classList.toggle("is-z");
	}

	// 点击切换
	let shell = (e) => {
		for (var i = 0; i < allButtons.length; i++)
			allButtons[i].addEventListener("click", getButtons);
		for (var i = 0; i < switchBtn.length; i++)
			switchBtn[i].addEventListener("click", changeForm)

	}

	shell();
}

onMounted(() => {
	IsLoginIn(0);
	LoginStart();
})

const email = ref('');
const code = ref('');
const RegisterName = ref('');
const RegisterPassword = ref('');
const RegisterPasswordRepeat = ref('');

const LoginName = ref('');
const LoginPassword = ref('');

const regex = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[^A-Za-z\d]).{8,20}$/;

function ResetPassword() {
	if (newPassword.value != repeatNewPassword.value) {
		window.alert("两次密码不一致！");
	} else {
		axios
			.post('/api/user/forget', {
				code: code.value,
				password: newPassword.value,
				mail:email.value,
			})
			.then(response => {
				console.log(response);
				if (response.data.data == 1) {
					CollectionVisiable = false;
				}
				else {
					window.alert(response.message);
				}
			})
			.catch(function (error) { // 请求失败处理
				console.log(error);
			});
	}
}

function SendCode() {
	axios
		.post('/api/mail/requestCode', {
			mail: email.value,
		})
		.then(response => {
			console.log(response);
		})
		.catch(function (error) { // 请求失败处理
			console.log(error);
		});
}

function Register() {
	if (RegisterPassword.value != RegisterPasswordRepeat.value || regex.test(RegisterName.value.toString) || regex.test(RegisterPassword.value.toString) || regex.test(RegisterPasswordRepeat.value.toString)) {
		window.alert("账号或密码格式错误！");
		RegisterName.value = '';
		RegisterPassword.value = '';
		RegisterPasswordRepeat.value = '';
	}
	else {
		axios
			.post('/api/user/register', {
				acName: RegisterName.value,
				username: RegisterName.value,
				password: RegisterPassword.value,
				mail: email.value,
				code: code.value,

			})
			.then(response => {
				console.log(response);
				if (response.data.data == 0) {
					window.alert(response.message);
				}
				else if (response.data.data == 1) {
					window.alert("注册成功！");
					router.push({ path: '/login' });
				}
			})
			.catch(function (error) { // 请求失败处理
				console.log(error);
			});
	}
}

function Login() {
	if (regex.test(LoginName.value.toString) || regex.test(LoginPassword.value.toString)) {
		window.alert("账号或密码格式错误！");
		LoginName.value = '';
		LoginPassword.value = '';
	}
	else {
		axios
			.post('/api/user/login', {
				username: LoginName.value,
				password: LoginPassword.value,
			})
			.then(response => {
				console.log(response);
				if (response.data.data == 0) {
					window.alert("账号或密码错误！");
					LoginName.value = '';
					LoginPassword.value = '';
				}
				else {
					window.alert("登录成功！");
					localStorage.setItem('userToken', response.data.data.token);
					console.log(localStorage.getItem('userToken'));
					localStorage.setItem('userName', LoginName);
					localStorage.setItem('userPicture', response.data.data.userDetails.url);
					localStorage.setItem('userId', response.data.data.userDetails.id);
					MyMount();
					router.push({ path: '/' });
				}
			})
			.catch(function (error) { // 请求失败处理
				console.log(error);
			});
	}
}

function MyMount() {
	//判空
	if (window.EventSource) {
		//得到eventSource对象实例，这个就是js专门为sse封装的
		let eventSource = new EventSourcePolyfill('/api/sse/connect', {
			headers: {
				'HOSHINO_T_KK': localStorage.getItem('userToken'),
			},
		});
		eventSource.onmessage = (event) => {
			console.log("收到消息id和内容是:", event.lastEventId, event.data)
			open3();
		};

		//连接成功回调（第一次连接成功的回调）
		eventSource.onopen = (event) => {
			console.log("第一次连接成功的回调:" + event)
		};

		//连接错误回调
		eventSource.onerror = (event) => {
			console.log("连接错误回调 :关闭连接")
			console.log("error-event:", event)
			//关闭连接（关闭后不会再自动重连）
			eventSource.close();
			console.log(localStorage.getItem('userToken'));
		};

		eventSource.addEventListener('close', (event) => {
			console.log("Connection closed: " + event);
			// 在这里可以执行一些关闭后的处理逻辑
		});
	} else {
		console.log("你的浏览器不支持SSE")
		ElMessage.error("你的浏览器不支持SSE")
	}
}

const open3 = () => {
	ElNotification({
		title: '消息提示',
		message: "您有新的消息",
		position: 'bottom-left',
	})
}

</script>

<style scoped>
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	/* 字体无法选中 */
	user-select: text
}

.body1 {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	width: 100%;
	height: 91.5vh;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	background-color: #ecf0f3;
	color: #a0a5a8;
}

.shell {
	position: relative;
	width: 1000px;
	min-width: 1000px;
	min-height: 600px;
	height: 600px;
	padding: 25px;
	background-color: #ecf0f3;
	box-shadow: 10px 10px 10px #d1d9e6, -10px -10px 10px #f9f9f9;
	border-radius: 12px;
	overflow: hidden;
}

/* 设置响应式 */
@media (max-width: 1200px) {
	.shell {
		transform: scale(0.7);
	}
}

@media (max-width: 1000px) {
	.shell {
		transform: scale(0.6);
	}
}

@media (max-width: 800px) {
	.shell {
		transform: scale(0.5);
	}
}

@media (max-width: 600px) {
	.shell {
		transform: scale(0.4);
	}
}

.container {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	width: 600px;
	height: 100%;
	padding: 25px;
	background-color: #ecf0f3;
	transition: 1.25s;
}

.form {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

.iconfont {
	margin: 0 5px;
	border: rgba(0, 0, 0, 0.5) 2px solid;
	border-radius: 50%;
	font-size: 25px;
	padding: 3px;
	opacity: 0.5;
	transition: 0.1s;
}

.iconfont:hover {
	opacity: 1;
	transition: 0.15s;
	cursor: pointer;
}

.form_input {
	width: 350px;
	height: 40px;
	margin: 4px 0;
	padding-left: 25px;
	font-size: 13px;
	letter-spacing: 0.15px;
	border: none;
	outline: none;
	background-color: #ecf0f3;
	transition: 0.25s ease;
	border-radius: 8px;
	box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;
}

.form_input:focus {
	box-shadow: inset 4px 4px 4px #d1d9e6, inset -4px -4px 4px #f9f9f9;
}

.form_span {
	margin-top: 30px;
	margin-bottom: 12px;
}

.form_link {
	color: #181818;
	font-size: 15px;
	margin-top: 25px;
	border-bottom: 1px solid #a0a5a8;
	line-height: 2;
}

.title {
	font-size: 34px;
	font-weight: 700;
	line-height: 3;
	color: #181818;
	letter-spacing: 10px;
}

.description {
	font-size: 14px;
	letter-spacing: 0.25px;
	text-align: center;
	line-height: 1.6;
}

.button {
	width: 180px;
	height: 50px;
	border-radius: 25px;
	margin-top: 50px;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1.15px;
	background-color: #4B70E2;
	color: #f9f9f9;
	box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #f9f9f9;
	border: none;
	outline: none;
}

.a-container {
	z-index: 100;
	left: calc(100% - 600px);
}

.b-container {
	left: calc(100% - 600px);
	z-index: 0;
}

.switch {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 400px;
	padding: 50px;
	z-index: 199;
	transition: 1.25s;
	background-color: #ecf0f3;
	overflow: hidden;
	box-shadow: 4px 4px 10px #d1d9e6, -4px -4px 10px #d1d9e6;
}

.switch_circle {
	position: absolute;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	background-color: #ecf0f3;
	box-shadow: inset 8px 8px 12px #b8bec7, inset -8px -8px 12px #fff;
	bottom: -60%;
	left: -60%;
	transition: 1.25s;
}

.switch_circle-t {
	top: -30%;
	left: 60%;
	width: 300px;
	height: 300px;
}

.switch_container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	position: absolute;
	width: 400px;
	padding: 50px 55px;
	transition: 1.25s;
}

.switch_button {
	cursor: pointer;
}

.switch_button:hover,
.submit:hover {
	box-shadow: 6px 6px 10px #d1d9e6, -6px -6px 10px #f9f9f9;
	transform: scale(0.985);
	transition: 0.25s;
}

.switch_button:active,
.switch_button:focus {
	box-shadow: 2px 2px 6px #d1d9e6, -2px -2px 6px #f9f9f9;
	transform: scale(0.97);
	transition: 0.25s;
}

.is-txr {
	left: calc(100% - 400px);
	transition: 1.25s;
	transform-origin: left;
}

.is-txl {
	left: 0;
	transition: 1.25s;
	transform-origin: right;
}

.is-z {
	z-index: 200;
	transition: 1.25s;
}

.is-hidden {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	transition: 1.25s;
}

.is-gx {
	animation: is-gx 1.25s;
}

@keyframes is-gx {

	0%,
	10%,
	100% {
		width: 400px;
	}

	30%,
	50% {
		width: 500px;
	}
}
</style>